<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>拦截器练习</h1>
  <input type="text" id="ipt">
  <button id="btn">提交</button>

  <script>
    //首先获取元素绑定事件
    const oIpt = document.querySelector('#ipt')
    const oBtn = document.querySelector('#btn')

    //创建一个axios实例，并全局配置
    const myAxios = axios.create({
        baseURL:'/',  //配置基础路径//
        timeout :10000,  //配置超时事件
        headers:{}
     })

    //  设置请求拦截
    myAxios.interceptors.request.use((config)=>{
        //可以在发送请求前做什么  一般来说核对用户token
        // console.log(config);


        //这里的回调有一个参数，拿到的是config配置，最后一定要返回出去
        return config
    },(err)=>{
        return Promise.reject(err.message)
    })

    myAxios.interceptors.response.use(function (response) {
    // 这里可以对响应数据进行处理 然后一定要返回响应数据
    return response;
  }, function (error) {
    // 可以处理响应错误
    return Promise.reject(error);
  });

  //绑定事件。axios请求数据
  oBtn.onclick =async function(){
    // 获取用户输入信息，声明一个变量
    const oIptValue = oIpt.value;
    //因为可能出现请求失败，所以用try catch抱一下，如果有错。可以处理错误信息
    try{
        const resultA= await myAxios.get('/user',{
            params:{
                //获取用户输入序号
                userId:oIptValue
            }
        })
        //打印一下回来的数据
        console.log(resultA,'resultA');
        //打印一下需要的data数据
        console.log(resultA.data.data);
    }catch(e){
        console.log(e.message,'错误信息');
    }
  }



  </script>
</body>
</html>